<template>
  <div class="salary-form">
    <h2>薪水信息填写</h2>
    <form @submit.prevent="handleSubmit">
      <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" v-model="name" required />
      </div>
      <div>
        <label for="salary">薪水：</label>
        <input type="number" id="salary" v-model.number="salary" required />
      </div>
      <button @click="handleSubmit">提交</button>
      <el-button type="primary" @click="handleClear">清除</el-button>
      <el-button type="primary">其他</el-button>
    </form>
    <div v-if="submitted">
      <p>姓名：{{ name }}</p>
      <p>薪水：{{ salary }}</p>
    </div>
    <div>&nbsp;</div>
    <!-- 个人信息-->
    <el-form :model="selfInfoForm2" label-width="auto" style="max-width: 600px">
      <el-form-item label="姓名">
        <el-input v-model="selfInfoForm2.name" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input-number v-model="selfInfoForm2.age" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="infoSubmitHandle">提交</el-button>
        <el-button @click="infoClearHandle">清除</el-button>
      </el-form-item>
    </el-form>
    <div v-if="selfInfoSubmitted">
      <p>姓名：{{ selfInfoForm2.name }}</p>
      <p>年龄：{{ selfInfoForm2.age }}</p>
    </div>
    <hr />
    <div>&nbsp;</div>
     <!-- 个人信息-->
      <el-form  label-width="auto" style="max-width: 400px">
        <el-form-item label="姓名">
          <input ref="nameRefObj" rol="admin"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="simpleFormSubmit">提交</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElInputNumber, ElButton } from 'element-plus'

export default defineComponent({
  name: 'SalaryForm',
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElInputNumber,
    ElButton,
  },
  setup() {
    const name = ref<string>('lily')
    const salary = ref<number | null>(1000)
    const submitted = ref<boolean>(false)
    const selfInfoSubmitted = ref<boolean>(false)

    // 定义 selfInfoForm 对象
    const selfInfoForm = ref<{ name: string; age: number | null }>({
      name: '',
      age: null,
    })
    const selfInfoForm2 = reactive({name:'lucy', age:18})

    const nameRefObj = ref()

    const handleSubmit = (): void => {
      submitted.value = true
    }

    const handleClear = (): void => {
      name.value = ''
      salary.value = null
      submitted.value = false
    }

    const infoSubmitHandle = (): void => {
      console.log('infoSubmitHandle start')
      console.log(selfInfoForm)
      console.log(selfInfoForm2)
      console.log('infoSubmitHandle start')
      selfInfoSubmitted.value = true
    }

    const infoClearHandle = (): void => {
      selfInfoForm.value.name = ''
      selfInfoForm.value.age = null
      selfInfoSubmitted.value = false
    }

    const simpleFormSubmit = (): void => {
      console.log('simpleFormSubmit start')
      console.log(nameRefObj.value) // dom 元素
      console.log(nameRefObj.value.getAttribute('rol')) // dom元素的属性
      console.log('simpleFormSubmit end')
    }

    return {
      name,
      salary,
      submitted,
      selfInfoSubmitted,
      handleSubmit,
      handleClear,
      selfInfoForm,
      infoSubmitHandle,
      infoClearHandle,
      selfInfoForm2,
      nameRefObj,
      simpleFormSubmit,
    }
  },
})
</script>

<style scoped>
.salary-form {
  max-width: 400px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}
.salary-form div {
  margin-bottom: 16px;
}
.salary-form label {
  display: inline-block;
  width: 60px;
}
.salary-form input {
  padding: 4px 8px;
}
.salary-form button {
  padding: 6px 16px;
}
</style>
